<template>
  <div>
    <mt-header fixed>
      <div @click="$router.go(-1)" slot="left">
        <mt-button icon="back">返回</mt-button>
      </div>
    </mt-header>
    <div class="detail_status">
      <p>{{this.$route.query.statusname}}</p>
    </div>
    <div class="detail_content">

      <div class="detail_food">
        <p>商品信息</p>
        <ul>
          <li v-for="(item,index) in productMes" :key="item.id">
            <span>{{index+1}}.{{item.hash.pname}}{{item.hash.fromat}}({{item.hash.tastename}})</span>
            <span>*{{item.hash.number}}</span>
            <span>￥{{item.hash.price*item.hash.number}}</span>
            <span>配菜：{{item.hash.fixingname}}</span>
          </li>
        </ul>
        <p>
          <!-- <span style="color:#26a2ff">联系代理</span> -->
          <span></span>

          <span v-if="this.$route.query.status==0||this.$route.query.status==7">待支付<i style="color:#f60">￥{{total}}</i></span>
          <span v-else>实付<i style="color:#f60">￥{{total}}</i></span>
        </p>
      </div>
      <div class="detail_psmes" v-if="$route.query.type==2">
        <p>
          自取信息
        </p>
        <p v-if="$route.query.status>1 && $route.query.status<7">
          <span>取货码</span>
          <span>{{orderMes.ordernumber}}</span>
        </p>
        <!-- <p v-if="$route.query.status>1 && $route.query.status<7">
          <span>预计自取时间</span>
          <span>{{orderMes.intime}}</span>
        </p> -->
        <!-- <p>
          <span>手机号</span>
          <span>{{orderMes.phone}}</span>
        </p> -->
        <p>
          <span>取货地址</span>
          <span>{{orderMes.mapaddress}}</span>
        </p>
        <p style="text-align:right;line-height:1">{{orderMes.address}}</p>
      </div>
      <div class="detail_psmes" v-if="$route.query.type==1">
        <p>
          配送信息
        </p>
        <p v-if="$route.query.status>1 && $route.query.status<7">
          <span>配送员</span>
          <span>小王166****0004</span>
        </p>
        <p v-if="$route.query.status>1 && $route.query.status<7">
          <span>送达时间</span>
          <span>尽快送达</span>
        </p>
        <p>
          <span>收货人</span>
          <span>{{orderMes.name}}{{orderMes.phone}}</span>
        </p>

        <p>
          <span>收货地址</span>
          <span>{{orderMes.mapaddress}}</span>
        </p>
        <p style="text-align:right;line-height:1">{{orderMes.address}}</p>
      </div>
      <div class="detail_ordermes">
        <p>订单信息</p>
        <p>
          <span>订单号</span>
          <span>{{orderMes.ordernumber}}</span>
        </p>
        <p>
          <span>下单时间</span>
          <span>{{intime}}</span>
        </p>
        <p>
          <span>付款时间</span>
          <span>{{paytime}}</span>
        </p>
      </div>
    </div>
  </div>


</template>

<script>
export default {
  data() {
    return {
      productMes: [],
      orderMes: {},
      intime: '',
      paytime: '',
      ts: this.newStore(),
    };
  },
  created() {
    this.$indicator.open({
      text: '加载中',
      spinnerType: 'fading-circle',
    });
    this.getOrderdetail();
  },
  computed: {
    total() {
      let totalMoney = 0;
      for (let i = 0; i < this.productMes.length; i += 1) {
        totalMoney += this.productMes[i].hash.price * this.productMes[i].hash.number;
      }
      return totalMoney;
    },
  },
  methods: {
    getOrderdetail() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A65E365344FE666E83338297EE123EEAA3723B5E6488CAE7E98',
        orderid: this.$route.query.orderid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.productMes = ts.d.data.operation2;
        this.orderMes = ts.d.data.operation1[0].hash;
        this.orderMes.ordernumber = this.orderMes.ordernumber.substr(-4);
        this.intime = `${new Date(ts.d.data.operation1[0].hash.intime * 1000).toLocaleDateString().replace(/\//g, '-')} ${new Date(ts.d.data.operation1[0].hash.intime * 1000).toTimeString().substr(0, 8)}`;
        this.paytime = `${new Date(ts.d.data.operation1[0].hash.paytime * 1000).toLocaleDateString().replace(/\//g, '-')} ${new Date(ts.d.data.operation1[0].hash.paytime * 1000).toTimeString().substr(0, 8)}`;
        this.$indicator.close();
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.detail_content
  margin-top 1.7rem
  height 100%
  background: -webkit-gradient(linear, 0 15%, 0 40%, from(#26a2ff), to(#f1f1f1));
  div
    margin-bottom 0.2rem

.detail_status
  height 1rem
  font-size 0.4rem
  text-align center
  color #fff
  line-height 1rem
  background #26a2ff
  position fixed
  width 100%
  top 0.7rem
.detail_food
  padding 0.1rem 0.2rem
  background #fff
  width 96%
  margin 0 auto
  box-shadow 1px 1px 1px 1px #ccc
  p
    height 0.6rem
    line-height 0.6rem
    &:nth-child(1)
      font-weight bold
      border-bottom 1px solid #f1f1f1
    span
      &:nth-child(2)
        float right
  ul
    li
      padding 0.2rem 0
      span
        display inline-block
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        &:nth-child(1)
          float left
          overflow: hidden;
          width 60%
        &:nth-child(2)
          max-width 20%
        &:nth-child(3)
          max-width 20%
          float right
.detail_psmes
  padding 0.1rem 0.2rem
  background #fff
  width 96%
  margin 0 auto
  box-shadow 1px 1px 1px 1px #ccc
  p
    height 0.6rem
    line-height 0.6rem
    &:nth-child(1)
      font-weight bold
      border-bottom 1px solid #f1f1f1
    &:last-child
      height 100%
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    span
      &:first-child
        color #aaa
      &:nth-child(2)
        float right
.detail_ordermes
  padding 0.1rem 0.2rem
  background #fff
  width 96%
  margin 0 auto
  box-shadow 1px 1px 1px 1px #ccc
  p
    height 0.6rem
    line-height 0.6rem

    &:nth-child(1)
      font-weight bold
      border-bottom 1px solid #f1f1f1
    span
      &:first-child
        color #aaa
      &:nth-child(2)
        float right
</style>

